@import '../../libs/weui.css';


body {
  overflow: hidden;
}

.modal-alert {
  display: none;
}

.wrapper {	
  position: fixed;
  width: 100%;
  min-width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.2);
    background-color: #ddd;  
  }
  &::-webkit-scrollbar {
    width: 5px;
    height: 100%;
    background-color: #fff;
  }

	.title {
		margin: 15px 15px 0;
		font: normal normal normal 15px/26px 'microsoft yahei';
		color: #63a8e2;
		border-bottom: 1px solid #63a8e2;
	}

	.subtitle {
		margin: 0 15px 15px;		
		font: normal normal normal 12px/26px 'microsoft yahei';
		color: #63a8e2;
	}

	form {
		margin: 15px;
	}

	.mrow {
		margin: 10px 0 0;

		label {
			width: 100px;
			display: inline-block;
			text-align: right;
			margin: 0 5px 0 0;
			color: #888;
			font: normal normal normal 14px/26px 'microsoft yahei';
		}

		.a-select {
			color: #333;
			font: normal normal normal 15px/26px 'microsoft yahei';			
		}

		@text-height: 26px;
		.text {
			width: 160px;
			height: @text-height;
			color: #333;
			font: normal normal normal 15px/@text-height 'microsoft yahei';
			border: 1px solid #ccc;
			padding: 0 2px;
		}

		.text-sm {
			width: 100px;
			height: @text-height;
			color: #333;
			font: normal normal normal 15px/@text-height 'microsoft yahei';
			border: 1px solid #ccc;
			padding: 0 2px;
		}

		.unit {
			margin: 0 5px 0 0;
			color: #888;
			font: normal normal normal 14px/26px 'microsoft yahei';			
		}

		.text-bg {
			width: 290px;
			height: 80px;
      font: normal normal normal 14px/22px 'microsoft yahei';   
		}

	}

	.foot {
		height: 60px;

		@btn-sure-height: 35px;
		.btn-sure {
			width: 180px;
			height: @btn-sure-height;
			float: left;
			margin: 5px 10px 5px 30px;
			font: normal normal normal 15px/@btn-sure-height 'microsoft yahei';		
		}


		@btn-cancel-height: 26px;
		.btn-cancel {
			width: 60px;
			height: @btn-cancel-height;
			float: right;
			margin: 10px 15px 0 0;
			font: normal normal normal 15px/@btn-cancel-height 'microsoft yahei';		
		}
	}
}



//最上层的选择页面
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 3;
  overflow: hidden;

  &.show {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    // animation: fadein 0.3s linear 0s 1 running forwards;
  }

  .backdrop {
    width: 20%;
    float: left;
    height: 100%;

    .close-choice {
      position: relative;
      float: right;
      width: 50px;
      height: 30px;
      top: 45%;
      background: transparent url(../../imgs/arrow.png) no-repeat center center;
      cursor: pointer;
    }
  }
  
  .content {
    position: relative;
    width: 80%;
    height: 100%;
    float: right;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    &.show {
      display: block;
      // animation: slidein 1s linear 0s 1 normal running backwards;
    }
    &.hide {
      display: none;
      // animation: slideout 1s linear 0s 1 normal running both;
    }

    @dialog-li-height: 44px;
    .title {
      width: 100%;
      height: @dialog-li-height;
      border-bottom: 1px solid #ddd;
      font: normal normal normal 15px/@dialog-li-height 'microsoft yahei';
      text-align: center;
    }

    ul.dialog {
      width: 100%;
      
      li {
        width: 100%;
        min-height: 44px;
        overflow: hidden;
        background: #fff;
        border-bottom: 1px solid #ddd;

        &:active {
          background: #f5f5f5;
        }

        a {
          width: 100%;
          height: 100%;
          display: block;
          color: #333;
          font: normal normal normal 15px/@dialog-li-height 'microsoft yahei';
          & > span {
            display: block;
            padding: 0 15px;
          }
        }

        & > span {
          color: #333;
          font: normal normal normal 15px/@dialog-li-height 'microsoft yahei';
          margin: 0 15px;
        }

        &.action {
          span {
            color: #387FC8;
          }
        }
      }
    }

    .modal-preloader {      
      position: relative;
      width: 100%;
      height: 60px;
      display: none;
      font: normal normal normal 14px/60px 'microsoft yahei';
      color: #999;
      text-align: center;

      &.show {
        display: block;
      }
    }
  }
}


.no-scrollbar {
  overflow-y: hidden;
}
